<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员后台管理</title>
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 800px;
        }
        a:link {text-decoration:none ; color: #000000;}
        a:visited {text-decoration:none ; color: #000000;}
        a:hover {text-decoration:none ; color: #000000;}
        a:active {text-decoration:none ; color: #000000;}
    </style>
    <link rel="stylesheet" href="../../static/plugins/elementui/index.css">

</head>
<body>

<div id="app">
    <el-container>
        <el-aside width="210px">
            <el-col :span="12">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo">
                    <el-menu-item index="0" style="height: 80px">
                        <span slot="title"><h3>校园二手商城</h3></span>
                    </el-menu-item>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-home"></i>
                            <span>主页</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/sold/console" target="right"><el-menu-item index="1-1">控制台</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-grid"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/admin/userlist" target="right"><el-menu-item index="2-1">用户列表</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-order"></i>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/commoditylist" target="right"><el-menu-item index="3-1">商品列表</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-s-comment"></i>
                            <span>公告管理</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/news/relnews" target="right"><el-menu-item index="4-1">发布公告</el-menu-item></a>
                            <a href="/news/newslist" target="right"><el-menu-item index="4-2">公告列表</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-claim"></i>
                            <span>销量分析</span>
                        </template>
                        <el-menu-item-group>
                            <a href="/sold/soldlist" target="right"><el-menu-item index="5-1">销量列表</el-menu-item></a>
                            <a href="/sold/console" target="right"><el-menu-item index="5-2">统计图</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-aside>
        <el-main>
            <el-container>
                <el-header>
                    <el-col :span="18">
                        <div class="grid-content bg-purple">
                            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" >
                                <el-menu-item index="1"><a href="/user/main" target="right"><i class="el-icon-user-solid"></i>个人中心</a></el-menu-item>
                                <el-menu-item index="2" @click="reflush" ><i class="el-icon-refresh-right"></i>刷新</el-menu-item>
                                <el-menu-item index="3" @click="qianduan" ><i class="el-icon-s-promotion"></i>前端页面</el-menu-item>
                            </el-menu>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple-light right">
                            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" >
                                <el-menu-item index="1" @click="dialogTableVisible = true"><i class="el-icon-message-solid"></i>消息</el-menu-item>
                                <el-submenu index="2">
                                    <template slot="title"><i class="el-icon-cherry"></i>{{username}}</template>
                                    <a href="/user/main" target="right"><el-menu-item index="2-1">个人资料</el-menu-item></a>
                                    <a href="/user/changepassword" target="right"><el-menu-item index="2-2">修改密码</el-menu-item></a>
                                    <el-menu-item index="2-3" @click="quit">退出</el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </div>
                    </el-col>

                </el-header>
                <el-main>
                    <iframe name="right" id="right" src="/sold/console" frameborder="0" width="100%" height="750px" class="el-main"></iframe>
                </el-main>
            </el-container>
        </el-main>
    </el-container>

    <el-dialog title="消息通知" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
            <el-table-column property="event" label="事件" width="150"></el-table-column>
            <el-table-column property="message" label="消息" width="300"></el-table-column>
            <el-table-column property="date" label="时间"></el-table-column>
        </el-table>
    </el-dialog>
</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            isCollapse: true,
            activeIndex: '1',
            dialogTableVisible:false,
            gridData:[{event:'通过',message:"百度",date:'2021.03.21'}],
            username:'',
            fullscreenLoading: false,
        },
        created(){
            this.getname();
        },
        methods: {
            getname(){
                axios.post("/admin/getusername").then((res)=>{
                    this.username = res.data.data;
                })
            },
            qianduan(){
                window.open("/","_blank");
            },
            //刷新页面
            reflush(){
                let elementById = document.getElementById("right");
                elementById.contentWindow.location.reload(true);
            },
            //退出
            quit(){
                axios.post("/admin/quit").then((res)=>{
                    this.$message.success(res.data.message);
                    //跳转页面
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                        location.href="/";
                    }, 2000);
                }).catch(()=>{
                    this.$message.error("退出失败");
                })
            }
        }
    })

</script>
</html>